<%-- <%@ page language="java" contentType="text/html; charset=ISO-8859-1" --%>
<%-- 	pageEncoding="ISO-8859-1"%> --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style>
	/* Context menu */
	.context-menu {
		display: none;
		position: absolute;
		border: 1px solid black;
		border-radius: 3px;
		width: 80px;
		background: white;
		box-shadow: 10px 10px 5px #888888;
	}
</style>
<!-- Context-menu -->
<div class='context-menu nav '>
	<!-- <input id="releaseNoteObjid" value="" type="hidden"> -->
	<div class="row mx-0 nav-item"><a type="button" class="col btn btn-primary nav-link text-white new">new</a>
	</div>
	<div class="context-menu-ready row mx-0 nav-item"><a type="button"
			class="col btn btn-primary nav-link text-white edit">edit</a>
	</div>
	<div class="context-menu-ready row mx-0 nav-item"><a type="button"
			class="col btn btn-primary nav-link text-white delete">delete</a>
	</div>
</div>

<script type="text/javascript">
	// var myContextMenuEvent = new CustomEvent('myContextMenu',{
	// 	data:{d1:'data'}
	// })

	var myContextMenuEvent = new Event('myContextMenu');

	function contextReady() {
		// Hide context menu
		$(document).bind("contextmenu click", function () {
			$(".context-menu").hide();
		});

		// disable context-menu from custom menu
		$(".context-menu").bind("contextmenu", function () {
			return false;
		});
		// hove font menu
		// the method below will make function switchShowHide() run twice when page is loaded.
		// $("li.modifyFont").on("mouseenter",switchShowHide()).on("mouseleave",switchShowHide());
		// this method work right.
		$(".new").on("mouseenter", function () {
			$(".new").show();
		}).on("click", fnew);
		$(".edit").on("mouseenter", function () {
			$(".edit").show();
		}).on("click", fedit);
		$(".delete").on("mouseenter", function () {
			$(".delete").show();
		}).on("click", fdelete);

	}

	function contextmenuInit() {
		// disable right click and show custom context menu
		// listen to right click of ".editContent" 
		$(".editRelease")
			.bind(
				"contextmenu",
				function (e) {
					// console.log('contextmenu event')
					// console.log(e);

					var top = e.pageY + 5;
					var left = e.pageX;

					// other thind to do
					rst = otherWorks(e);

					if (rst != "ready") {
						// some message to show
						$(".context-menu-ready").hide();
					} else {
						$(".context-menu-ready").show();
					}
					// Show contextmenu
					// $(".context-menu").css("bottom", "auto");
					$(".context-menu").css("top", top + "px");
					$(".context-menu").css("left", left + "px");
					$(".context-menu").show();
					body = $('body')[0]
					if (body.dispatchEvent) {
						body.dispatchEvent(myContextMenuEvent);
					} else {
						body.fireEvent(myContextMenuEvent);
					}
					// disable default context menu
					return false;
				});
		// make body no overflow, just to judge whether context menu overflow
		var curOverflow = $("body")[0].style.overflow;
		if (!curOverflow || curOverflow === "visible")
			$("body")[0].style.overflow = "hidden";
		$("body").bind("myContextMenu", function (e) {
			let scrollHeight = $('body')[0].scrollHeight
			let clientHeight = $('body')[0].clientHeight
			if (scrollHeight > clientHeight) {
				dom = $('.context-menu')[0]
				let top = dom.offsetTop;
				let height = dom.offsetHeight;
				$(".context-menu").css("top", (top - height) + "px");
			}
		})
	}

	//fnew, fedit, fdelete from js file.
</script>